<template>
  <view
    class="text-list flex-1 flex gap-row-8px overflow-y-overlay max-h-282px"
    key="courseList"
    v-infinite-scroll="load"
    :infinite-scroll-disabled="loading"
  >
    <div
      class="text-item"
      v-for="(item, index) in list"
      :key="index"
      @click="handleClickItem(item)"
    >
      <div class="text-14px">{{ formatDate(item.startTime, 'YYYY-MM-DD HH:mm:ss') }}</div>
      <div class="text-16px text-title color-#333">{{ item.title }}</div>
    </div>
    <!-- <el-popover
      v-for="(item, index) in list"
      :key="index"
      placement="left"
      trigger="hover"
      width="236"
      :content="''"
    >
      <template #reference>
        <div class="text-item" @click="handleClickItem(item)">
          <div class="text-12px">{{ formatDate(item.startTime, 'YYYY-MM-DD HH:mm:ss') }}</div>
          <div class="text-16px text-title color-#333">{{ item.title }}</div>
        </div>
      </template>
      <div class="line-height-22px text-14px color-#333">
        <div><span class="color-#999999">标题：</span>{{ item.title }}</div>
        <div><span class="color-#999999">内容：</span>{{ item.description }}</div>
        <div><span class="color-#999999">开始时间：</span>{{ formatDate(item.startTime, 'YYYY-MM-DD HH:mm:ss') }}</div>
        <div><span class="color-#999999">结束时间：</span>{{ formatDate(item.endTime, 'YYYY-MM-DD HH:mm:ss') }}</div>
        <div><span class="color-#999999">创建时间：</span>{{ formatDate(item.createTime, 'YYYY-MM-DD HH:mm:ss') }}</div>
      </div>
    </el-popover> -->
    <el-empty v-if="!list.length" class="!p0 m-auto" description="暂无数据" />
  </view>
</template>

<script setup lang="ts">
import { formatDate } from '@/utils/formatTime'
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})
const emit = defineEmits(['clickItem', 'load'])
const handleClickItem = (course: any) => {
  console.log(course)
  emit('clickItem', course)
}
const load = () => {
  emit('load')
}
</script>

<style lang="scss" scoped>
.text-list {
  flex-direction: column;

  .text-item {
    font-size: 16px;
    line-height: 23.17px;
    letter-spacing: 0;
    color: #999;
    cursor: pointer;

    &:hover {
      .text-title {
        color: var(--el-color-primary);
      }
    }
  }
}
</style>
